Creating HTML -- A simple guide

Now Updated For Some HTML 3.0 and Netscape (tm) Extensions!!

Listed or Mirrored in over 20 countries!
Your comments about Creating

If you like this site, help get me on
Splitinfini ty's top 100 web developer resources
by clicking on this link.

Get the downloadable version of Creating HTML. It's great for off-line reference.

Compressed Format (7Kb) - An RTF formatted document, compressed in ZIP.
Uncompressed Format (21Kb) -An RTF formatted document, uncompressed for MAC users or others without a compression program.

The RTF format is usable by PC users (Notepad), MAC users, and UNIX users.

I've scoured the net for a simple, concise guide to writing HTML documents, and if you're like me, you haven't found one without hours of searching. I'm hoping this will be a site that beginners can use to get familliar with HTML, and the steps to creating a simple home page.

Look for a total redo of this page and addition of more/updated content. I have really good things planned for this page, including how to do forms, frames, image maps, and an HTML viewing script that you can type your code in and see what it'll look like. Look for these changes over the next couple of months. Check out how the new look is coming along here.

Outline

 
First Steps 
HTML Editors 
The HTML Markup Language 
General Tags 
Lists 
Highlighting 
Pre-Defined Text 
Special Characters 
HTML 3.0 and Netscape Extensions 
Backgrounds 
Colored Typing 
Tables 
Links 
Anchors 
Links to Other Sites 
HTTP Links 
FTP Links 
Gopher Links 
Newsgroup Links 
Individual File Links 
Putting Your Site on the Web 
Style Rules 
Putting the Page on the System 
Advertising Your Site 
Extras To Help You 
Style Guide at CERN 
Don'ts for HTML 
HTML Validator 
Footnote

First steps

HTML Editors

One of the first steps to creating a good HTML document is finding a good HTML editor. Although this is not necessary, and the editing can be accomplished on any simple word processor, a good editor makes it much easier. I use Microsoft Front Page when I use an editor.

Here are some others (all programs are MS Windows):

HotDog Web Editor

The home page for Sausage Software. Contains download of program, registration info, docs, and more.

SoftQuad HoTMetaL

The biggest and most sophisticated editor. It is a professional editor, and uses 8 meg of RAM. The home page for SoftQuad contains more information.

Microsoft FrontPage

The best one out there. Very complete, easy to use, and comes with many features. Beware the MSIE specific features though!

The HTML Markup Language

Next, you need to learn or find a listing of the HTML markup tags. Here's a list of the simple ones I know for HTML v3.0.

Three periods ' ...' between two tags represent the text between the tags.

Brackets [ ] mean optional.

 
 

General Tags <TITLE>text for title</TITLE> Title 
(length < 64 characters) <H 
n>text for heading</H> Heading( 
n=1 to 6, 1 is biggest) <P> 
text...</P> New paragraph On a paragraph, it is acceptable only 
to put <P> at the end of the paragraph only. These tags are needed in 
at least that form to separate paragraphs. <HR> Horizontal rule- a 
line 

Images <IMG SRC=" 
image name" [ALT=" 
image description"] [ALIGN=" 
top, middle, or bottom"] > 

 If you are using the image as a link, you can add BORDER=# to determine 
the width of the colored 

 border (i.e. BORDER=0 gives 
no link border). 
 

Lists <OL> Ordered list, numbered consecuitively 
<LI> Each item in a list (used for all lists) </OL> Ends the 
list <UL> Unordered list, marked with dots <LI> </UL> 
<DIR> Directory list <LI> </DIR> <MENU> List of 
short items <LI> </MENU> <DL [COMPACT]> Definition list 
[compacted smaller] <DT> Word <DD> Definition </DL> 
 

Highlighting 
NOTE:Some of these will not look like they should because of the format 
I had to use to list them. I will mark these with a *. 
<CITE>...</CITE> 
citation <EM>...</EM> 
emphasis <KBD>...</KBD> * 
keyboard input <SAMP>...</SAMP> * 
literal characters <STRIKE>...</STRIKE> 
strike out <STRONG>...</STRONG> 
strong emphasis <VAR>...</VAR> * 
variable name <B>...</B> 
bold <I>...</I> 
italic <U>...</U> * 
underlined <BLINK>...</BLINK> 
blinking

The Pre-Defined Text Tag

Another tag that can be used in HTML is the <PRE> tag. This is the tag for pre-defined text. To put a list or paper that is already formatted through a word processer, you can put <PRE> at the begginning of the document and </PRE> at the end to keep the formatting.

NOTE: This may not work all of the time, and the formatting may not be exactly the same. Also remember to use the end tag </PRE> at the end to turn off pre-formatting.

Special Characters

Some characters are reserved by HTML and must use a code to represent that character. Here is a list of the most common:

 &lt; < less than symbol &gt; > greater than symbol 
&amp; & ampersand &quot; " double quote

Here is a complete list of the Latin-1 Character list!!!!
Please don't get caught surfing from this place! Just use the "BACK" button on your browser..

HTML 3.0 and Netscape Extensions

The newest form of HTML is HTML 3.0. Also, Netscape has implemented its own extensions. This section will deal with the extensions of BACKGROUNDS, COLORED TEXT, and TABLES.

Backgrounds

The BACKGROUND command, given in a command called the BODY command, determines the color of the background, or determines a picture to be displayed on the background.

The BODY command is in the top of the page, immediately after the TITLE.

Here is an example of a white background:

<BODY bgcolor="#ffffff">

Notice the #ffffff denoting the color white. This is the hexadecimal representation of the color white.

Here is an example of a background using the GIF file named ROCKS.gif:

<BODY background="rocks.gif">

Place in quotes the URL of the picture you want there if it is not in the same directory as the page itself.

Text Colors

Other BODY commands are the TEXT, LINK, VLINK, and ALINK commands. Here, the default color of the text and links can be changed.

These commands are placed in the same place as the BACKGROUND command. TEXT = The color of the normal text on the page. LINK = The color of unfollowed links on the page. VLINK = The color of followed links on the page. ALINK = The color of links that are highlightd (i.e. links that are clicked on and held down). Here is an example of white text with green links:

<body text="#ffffff" link="#ffffoo" >

These commands, along with the VLINK and ALINK also use the hexadecimal color system.

Here's a list of Netscape 1.1 HexCodes for colors. Many thanks to Ken Chan ( kenchan at netcom.com) for this list.

Also, here is a site that lists the HexCodes. Thanks to Teresa De Paola ( td16 at cornell.edu) for the suggestion of this site.

Tables

Tables are one of the newest and best features of HTML writing. It enables writers to make colomns of information separated by table definition. Unfortunately, it is also one of the most complicated commands.

First, the general looks of the table must be defined. This is dome with the TABLE command.

Next, the first row of the table must be defined. Use the TR command for this. When you are done writing one row, shut off the TR like any other command by using the /.

Finally, define the individual fields in the table with the TD command.

Here is an example of a table:

<TABLE BORDER=1 VALIGN=CENTER CELLPADDING=2> <TR> <TD>APPLES: <TD>25 </TR> <TR> <TD>ORANGES: <TD>46 </TR> </TABLE>

And here is what the table would look like:

APPLES: 25

ORANGES: 46

This example is a table that will have borders one unit wide, with cell padding of two units. These units are hard hard to describe, and I suggest that you experiment with different values to achieve the desired look.

Another added feature of TABLES is the <ROWSPAN> and <COLSPAN> tags. You can use these if you want a certain cell to take up more than one row or column, these can be used. Here is an example of some code that uses COLSPAN. (ROWSPAN is used the same way):

<TABLE BORDER=1 VALIGN=CENTER CELLPADDING=2> <TR> <TD COLSPAN=2>APPLES </TR> <TR> <TD>RED <TD>GREEN </TR>

And here is how it would look:

APPLES

RED GREEN

Some of the valus in the TABLE argument can be modified to change the look of the table. Experiment with BORDER=number and CELLPADDING=number to get the desired look.

Links

Links are connections to specific spots in the same document, other documents on the Web, FTP sites, Gopher sites, and almost anything else on the Internet. These are by far the most complicated of HTML tags. It just takes practice, and trial and error to get the hang of them.

Anchors

Anchors are links to a specific spot in a document. Many editors will make them for you, but it is good to know how to do them as well.

First, find the spot in you document you want you anchor to go to.

Then name the anchor: <A NAME=" name of anchor"> linked text on the screen</A>

Then find the spot you want the link to the anchor.

Place the anchor link: <A HREF="# name of anchor"> linked text on the screen</A>

Example: This anchor will take you to the Links section.

Links to Other Sites

Links to other sites are the backbone of the World Wide Web. Through these links, users can move from page to page, or site to site without typing in lenghty addresses. Possible types of links are : HTTP (Web sites), FTP (File Transfer Protocol), Gopher , Newsgroups, and specific files on the local system.

HTTP Links
<A HREF="http:// host address/path name"> linked text on the screen</A>

FTP Links
for a general FTP directory
<A HREF="ftp:// host address/path name/"> linked text on the screen</A>
or for a specific file in an FTP directory
<A HREF="ftp:// host address/path name/file name"> linked text on the screen</A>

Gopher links
<A HREF="gopher:// host address"> linked text on the screen</A>

Newsgroup Links
for a whole newsgroup
<A HREF="news:// newsgroup"> linked text on the screen</A>
or for an individual article
<A HREF="news:// article-id number"> linked text on the screen</A>

Individual File Links
for a file on another host
<A HREF="file:// host address/path name/file name"> linked text on the screen</A>
or for a local file
<A HREF="file:/ path name/file name"> linked text on the screen</A>

Another good way to learn HTML is to copy off of others. Using your browser, go to a page that has many of the effects that you want on your page. Save off this file as a *.htm file and view it with your HTML editor. This way you will be able to learn what tags they used, and use them for your own page.

Putting Your Site on the Web
Now create your site, debug it, and make it look how you want. To debug it, you can go to your 'open file command' (on Netscape. This may differ on other browsers such as Mosaic) and open your html documents ( filename.htm). You will be able to view them with your browser and make sure that they look how you want them to look.
When creating an HTML document, there are some basic rules to follow to make 'surfing the net' easier for the users of your page.

NEVER use too many graphics. Too many graphics will slow down the loading of a document and annoy the users of the page who aren't fortunate enough to be on a mainframe. Keep graphics simple. If you must use a graphic, preferrably use *.jpg format. These are smaller, and they load quicker.
NEVER make 'Click Here' a link. Using 'Click Here' as a link is redundant. Any link will show up as blue on a browser, telling the user where to click.
Do not put too many links on one page, unless it is a bookmark or links page. Putting links to everything from bathrooms to sattelite images will confuse your users. Keep it simple and keep each page limited to a few topics. Let these topics branch themselves out.
Make top level (welcome) pages short and simple. Users who are just browsing don't want to load large documents. Put links from your first page to larger documents you want made avaliable.
Beware of cultural differences. If you are creating a page that you want to be able to reach anyone, be careful of cultural differences such as the writing of dates, use of puns, jokes, etc.
If you can, sign your work. At the bottom of your top level document, give credit to the creator of the page. This will give that person recognition for the hard work they put into creating the page. This could lead to opportunities to create pages for others (for a fee possibly!) or just some good old fashioned recognition.
Make your page useful If you want your page to be one with alot of return traffic, make your page useful. Have a few things that people will want to come back and check out later.

Now when you have finished your document, contact the administrator of your system to see what needs to be done to make the document avaliable to the public. Many systems set up folders for individual users to use and place their documents.

Now that you have your site on the Web, how do you let people know that you are there?? The best way is to advertise your site on lists and searchers such as Yahoo, EiNet, Lycos, and more. The quickest and easiest way to reach all of these is by using a free service called Submit-It. This service will allow you to register your page with many, many different lists and searchers. This will give your page world-wide exposure and greatly increase your chances of having the people you wish to reach see your page.

Extras To Help You

Style Guide Tim Berners Lee at CERN. From the president of the World Wide Web Consortium at CERN, the authority on HTML.
Don'ts for HTML HTML Bad Style Page A good page that tells you what not to do on your page.
HTML Validator Doctor HTML The best HTML validator out there. Will go to your page and check for

Spelling
Image Syntax
Document Structure
Table Structure
Form Structure
and give you an:

Image Analysis
Hyperlink Analysis
Command Hierarchy
Summary
A SUPERB Site!

Footnote:
There may be many things that I have left out of this guide in order to make it simple to understand for beginning users. I advise that once you have mastered the basics of writing HTML, seek out a more detailed guide. There are many on the net, and I will place a link to one of them after this section. Also, if you wish to learn more, there are scores of books (Yes, paper books. Not Cyberbooks) avaliable in libraries and bookstores. They can be of great help, also.
The World Wide Web Project page at CERN Many of the links mentioned on this page can also be reached through The Project at CERN, as well as many others such as backgrounds, future developments, HTML and Web software, and much, much more.
A good book for the advanced HTML writer is Spinning the Web by Andrew Ford. Although this book is expensive ($30.00 at Barnes and Noble bookstores) and contains alot of information about running a Web server, it tells about the technical language behind HTML, SGML, URLs, Fill-out forms, Image maps, and more.

Thanks heaps to

for the drive space.

All E-Mail concerning this page should use subject:HTML Guide

This page created by Jason Borneman